<template>
	<view class="content">
		<view class="top-bolck"></view>
		<view class="report-view">
			<view class="title-box">
				<view class="mess-title">
					<i class="iconhomeworkfont iconchakanxcx lefticon"></i>
					<view>作业报告</view>
				</view>
			</view>
			<view class="report-mess">
				<view class="tab-box">
					<view :class="{'tab-item':pageChange == 'mess'}" @click="pageChange = 'mess'">作业/试卷信息</view>
					<view :class="{'tab-item':pageChange == 'topic'}" @click="pageChange = 'topic'">题目列表</view>
				</view>
				<view class="sub-title">
					<i class="iconhomeworkfont iconchakanxcx lefticon"></i>
					<view>作业/试卷信息</view>
				</view>
			</view>
			<view class="conter-body">
				<!-- //报告 -->
				<block v-if="pageChange == 'mess'">
					<view class="messconter-box">
						<view class="messbox-item">作业名称：{{ homeInfo.homework.homework_name }}</view>
						<view class="messbox-item">学科：{{ homeInfo.homework.subject }}</view>
						<view class="messbox-item">题目数：{{ topicLength }}</view>
						<view class="messbox-item">作业简介：{{ homeInfo.homework.homework_desc || '无' }}</view>
						<view class="messbox-item">布置时间：{{ homeInfo.homework.begin_time || '-' }}</view>
						<view class="messbox-item">截止时间：{{ homeInfo.homework.receipt_time | filterEndTime }}</view>
					</view>
					
					<view class="model-title">
						<i class="iconhomeworkfont iconchakanxcx lefticon"></i>
						<view>答题情况</view>
					</view>
					<view>
						<!-- //快速作业 -->
						<block v-if="HOME_TYPE == 1">
							<view class="accessory">
								<view v-for="(fitem, findex) in quickFile" :key="findex">
									<view class="uploadIcon2" v-if="fitem.filesType == 'video'" @tap="preview(findex)"><i class="iconhomeworkfont iconbofangxcx"></i></view>
									<view class="uploadIcon2" v-if="fitem.filesType == 'audio'" @tap="preview(findex)"><i class="iconhomeworkfont iconyinpinxcx"></i></view>
									<view class="uploadIcon2" v-if="fitem.filesType == 'image'" @tap="preview(findex)"><i class="iconhomeworkfont iconxiangcexcx"></i></view>
								</view>
								<view class="accessoryText" @click="clearYuLang" v-if="yuLangShow">收起</view>
							</view>
							<block v-if="yuLangShow">
								<ImageShow
									v-if="quickFile[selectQuickIndex].filesType == 'image'"
									:url="quickFile[selectQuickIndex].url"
									width="100%"
									height="50vh"
									style="margin-bottom:40upx"
								></ImageShow>
								<video
									v-if="quickFile[selectQuickIndex].filesType == 'video'"
									style="margin-bottom:40upx;width: 100%;height: 40vh;"
									:src="quickFile[selectQuickIndex].url"
								></video>
								<audio v-if="quickFile[selectQuickIndex].filesType == 'audio'" :src="quickFile[selectQuickIndex].url" controls style="margin-bottom:40upx"></audio>
							</block>
						</block>
						<!-- //常规作业 -->
						<block v-if="HOME_TYPE == 2">
							<view class="report-form">
								<view class="form-item">正确率: {{ stateStu.allNum != 0 ? ((stateStu.arr[0] / stateStu.allNum) * 100).toFixed(2) : '0' }}%</view>
								<view class="form-item">错误率: {{ stateStu.allNum != 0 ? ((stateStu.arr[1] / stateStu.allNum) * 100).toFixed(2) : '0' }}%</view>
								<view class="form-item">用时:{{ formatSeconds(homeInfo.use_time) }}</view>
							</view>
							<view class="state-box">
								<view
									class="correct"
									:style="{
										background:
											(stateStu.arr[0] / stateStu.allNum) * 100 > 50
												? `linear-gradient(to right, #1fd0a3 ${(stateStu.arr[0] / stateStu.allNum) * 100}%, transparent ${100 -
														(stateStu.arr[0] / stateStu.allNum) * 100}%)`
												: `linear-gradient(to left, transparent ${100 - (stateStu.arr[0] / stateStu.allNum) * 100}%, #1fd0a3 ${(stateStu.arr[0] /
														stateStu.allNum) *
														100}%)`
									}"
								>
									正确：{{ stateStu.arr[0] }}题
								</view>
								<view
									class="error"
									:style="{
										background:
											(stateStu.arr[1] / stateStu.allNum) * 100 > 50
												? `linear-gradient(to right, #f56c6c ${(stateStu.arr[1] / stateStu.allNum) * 100}%, transparent ${100 -
														(stateStu.arr[1] / stateStu.allNum) * 100}%)`
												: `linear-gradient(to left, transparent ${100 - (stateStu.arr[1] / stateStu.allNum) * 100}%, #f56c6c ${(stateStu.arr[1] /
														stateStu.allNum) *
														100}%)`
									}"
								>
									错误：{{ stateStu.arr[1] }}题
								</view>
								<view class="done">未答：{{ stateStu.arr[2] }}题</view>
							</view>
							<!-- 筛选按钮 -->
							<view class="select-ground">
								<view class="btn-item" :class="{ 'is-select-btn': selectGround == 'danXuan' }" @click="selectGround = 'danXuan'">单选题</view>
								<view class="btn-item" :class="{ 'is-select-btn': selectGround == 'duoXuan' }" @click="selectGround = 'duoXuan'">多选题</view>
								<view class="btn-item" :class="{ 'is-select-btn': selectGround == 'tianKong' }" @click="selectGround = 'tianKong'">填空题</view>
							</view>
							<!-- 题目列表 -->
							<view class="topic-list">
								<view class="topic-item" v-for="(item, index) in topicListsGround[selectGround]" :key="index" @click="toDetails(item)">
									<view class="item-index" :style="{ backgroundColor: item.is_right == 1 ? '#1FD0A3' : '#F56C6C' }">
										{{ (item.score ? item.score + '分' : item.score) || '-' }}
									</view>
									<view>{{ item.pid ? `${item.pid}-${item.num}` : item.num }}</view>
								</view>
								<NoMore v-if="topicListsGround[selectGround].length == 0" style="line-height: 100upx;width: 100%;"></NoMore>
							</view>
							<!-- //简答题 -->
							<view class="tableBody">
								<view class="trRow">
									<view class="thItem">题号</view>
									<view class="thItem">题分</view>
									<view class="thItem">得分</view>
									<view class="thItem">批改</view>
									<view class="thItem">点评</view>
									<view class="thItem">操作</view>
								</view>
								<view style="margin: 10rpx 0;" class="trRow" v-for="(item, index) in topicListsGround.zhuGuan" :key="index">
									<view class="tdItem" style="color: #369AFE;">{{ item.pid ? `${item.pid}-${item.num}` : item.num }}</view>
									<view class="tdItem">{{ item.score || '-' }}</view>
									<view class="tdItem">{{ item.score && item.myscore || '-' }}</view>
									<view class="tdItem">
										<view v-if="item.type == 0" style="color:#F56C6C">未批改</view>
										<view v-else>已批改</view>
									</view>
									<view class="tdItem">
										<view v-if="item.remark" style="color:#F56C6C">已点评</view>
										<view v-else>未点评</view>
									</view>
									<view class="tdItem"><i class="iconhomeworkfont iconchakanxcx"  @click="toDetails(item)"></i></view>
								</view>
							</view>
							<NoMore v-if="topicListsGround.zhuGuan.length == 0" style="line-height: 200upx;"></NoMore>
						</block>
					</view>
					<view class="model-title">
						<i class="iconhomeworkfont iconchakanxcx lefticon"></i>
						<view>作业点评</view>
					</view>
					<view class="comment-view">{{commentValue||'无'}}</view>
					<!-- <view class="comment-view"><textarea v-model="commentValue" style="width: 100%;font-size: 28rpx;" maxlength="-1" placeholder="请输入评价" /></view> -->
					<!-- <view class="comm-put"><view class="tijiaobtn-item" style="width: 150upx;" @click="commentPut">提交点评</view></view> -->
				</block>
				<!-- //题目 -->
				<block v-if="pageChange == 'topic'">
					<view class="topic-box">
						<!-- 图片 -->
						<block v-if="ANSERT_TYPE == 1">
							<block v-for="(item, index) in pictureArr" :key="index">
								<ImageShow v-if="item.filesType == 'image'" :url="item.url" width="100%" height="50vh" style="margin-bottom:40upx"></ImageShow>
								<video v-if="item.filesType == 'video'" style="margin-bottom:40upx;height: 40vh;width: 100%;" :src="item.url"></video>
								<audio v-if="item.filesType == 'audio'" :src="item.url" controls style="margin-bottom:40upx"></audio>
							</block>
						</block>
						<!-- 试题展示 -->
						<block v-else>
							<view class="topic-item" v-for="(item, index) in topicList" :key="index">
								<view style="display: flex;width: 100%;">
									<view v-if="item.num">{{ index + 1 }}.</view>
									<view style="flex: 1;word-break: break-all;" v-html="item.title"></view>
								</view>
								<view class="option-item" v-html="item.option" style="word-break: break-all;"></view>
							</view>
						</block>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
import { formatSeconds } from '@/common/tool';
import NoMore from '@/components/qz-no-more.vue';
import ImageShow from '@/components/qz-movable-image-show.vue';
export default {
	components: {
		NoMore,
		ImageShow
	},
	data() {
		return {
			formatSeconds,
			//信息显示
			messShow: true,
			//作业类型
			HOME_TYPE: null,
			ANSERT_TYPE: null,
			//题目列表
			topicList: [],
			//图片题目列表
			pictureArr: [],
			//统计
			homeInfo: {
				homework: {
					create_time: '',
					end_time: '',
					homework_name: '',
					subject: '',
					homework_desc: ''
				}
			},
			optionList: [], //答题卡题目列表
			//答题卡分组
			topicListsGround: {
				danXuan:[],
				duoXuan:[],
				tianKong:[],
				zhuGuan:[]
			},
			selectGround: 'danXuan', //选择分组

			//点评
			commentValue: '',

			//快速作业附件列表
			quickFile: [],
			//选择预览文件
			selectQuickIndex: 0,
			yuLangShow: false,

			stateStu: {
				//状态栏
				arr: [0, 0, 0],
				allNum: 0
			},
			
			//页面切换
			pageChange:'mess',//'mess' 'topic'
			
			//页面传参
			student_id:'',
			homework_id:''
		};
	},
	filters: {
		filterEndTime(val) {
			if (!val) {
				return '--';
			}
			var getTime = new Date(val);
			if (getTime.getFullYear() > 2280) {
				return '--';
			} else {
				return val;
			}
		}
	},
	computed: {
		topicLength() {
			var arrLength = this.optionList;
			var num = 0;
			var pidArr = [];
			arrLength.forEach(item => {
				if (!item.pid) {
					num++;
				} else {
					pidArr.push(item);
				}
			});
			const res = new Map();
			pidArr.forEach(item => {
				res.set(item.pid, 1);
			});
			return num + res.size;
		}
	},
	onLoad: function(option) {
		//option为object类型，会序列化上个页面传递的参数
		this.student_id = option.student_id;
		this.homework_id = option.homework_id;
		this.get_topic();
		this.get_topicReportData(true);
	},
	methods: {
		async get_topic() {
			var result = await this.$wapi.apiPost(`api/v1/parent/homework/student/getHomeworkInformation/${this.homework_id}`, {});
			console.log('题目列表', result);

			// 判断大类型 1 快速 2常规
			var HOME_TYPE = result.data.data.homework.home_type;
			this.HOME_TYPE = HOME_TYPE;

			if (HOME_TYPE == 1) {
				var homework = result.data.data.homework;
				this.topicList = [
					{
						title: homework.homework_desc,
						option: '',
						num: false
					}
				];
			} else {
				// 子类型 1图 2系统
				var ANSERT_TYPE = result.data.data.homework.question_type;
				this.ANSERT_TYPE = ANSERT_TYPE;

				if (ANSERT_TYPE == 1) {
					var pictureArr = await this.pictureTopics(result.data.data.picture);
					this.pictureArr = pictureArr;
				} else {
					var matterArr = this.systemTopics(result.data.data.matter);
					this.topicList = matterArr;
				}
			}
			console.log("题目列表：",this.topicList)
		},
		//处理图片题
		async pictureTopics(Picture) {
			var arr = [];
			for (let i = 0; i < Picture.length; i++) {
				var res = await this.$wapi.apiPost(`api/v1/student/homework/student/getHomeworkInformation/${this.homework_id}`, {
					picture_id: Picture[i]
				});
				var picture = res.data.data.sheet[0].picture.question;
				var type = picture.split('.');
				var filesType = this.fileTypes(type[type.length - 1]);
				arr.push({
					url: picture,
					filesType
				});
			}
			return arr;
		},
		//处理系统题目显示
		systemTopics(matterArr) {
			var arr = [];
			matterArr.forEach(item => {
				var option = item.options.map(item => {
					return item.options;
				});
				var obj = {
					title: item.main.matter,
					option: option.join('</br>'),
					num: true
				};
				arr.push(obj);
			});
			return arr;
		},
		/**
		 * @param Boolean  addquery 是否第一次调用
		 * @param Object  addquery 追加参数
		 */
		async get_topicReportData(isFirst, addquery = {}) {
			var query = {
				student_id: this.student_id,
				homework_id: this.homework_id,
				...addquery
			};
			var url = '/api/v1/parent/homework/report/PersonReport';
			var res = await this.$wapi.apiPost(url, query);
			console.log('学生个人报告：', res);

			if (res.data.code != 200) {
				uni.showToast({
					title: res.data.message,
					icon: 'none',
					duration: 2000
				});
				setTimeout(() => {
					uni.navigateBack();
				}, 2000);
				return;
			}

			//题目列表
			this.optionList = res.data.data.student;

			//统计
			this.homeInfo = res.data.data.report;
			//作业评测
			this.commentValue = res.data.data.report.remark;

			//快速作业
			if (this.HOME_TYPE == 1) {
				var fuJian = res.data.data.student[0];
				var fileUrl = fuJian.picture || fuJian.accessory;
				var fileArr = fileUrl.split('&&&&');
				// fileArr.push("http://homework-1302994015.cos.ap-guangzhou.myqcloud.com/homework/image/202101071135305ff6818256df4.mp4","http://homework-1302994015.cos.ap-guangzhou.myqcloud.com/homework/image/202101061158565ff53580f41b5.mpeg")
				this.quickFile = fileArr.map(el => {
					var type = el.split('.');
					var filesType = this.fileTypes(type[type.length - 1]);
					var obj = {
						url: el,
						filesType
					};
					return obj;
				});
				console.log('Quick', this.quickFile);
			} else {
				//题目概况
				var stateArr = [0, 0, 0];
				var studentList = res.data.data.student;
				studentList.sort(function(a, b) {
					return (a.pid || a.num) - (b.pid || b.num);
				});
				studentList.forEach(el => {
					if (el.is_right == 1) {
						stateArr[0]++;
					} else if (el.is_right == 2) {
						stateArr[1]++;
					} else {
						if (!el.options && !el.picture && !el.accessory) {
							stateArr[2]++;
						}
					}
				});
				this.stateStu = {
					arr: stateArr,
					allNum: stateArr[0] + stateArr[1] + stateArr[2]
				};

				//题目分类
				var danXuan = [];
				var duoXuan = [];
				var tianKong = [];
				var zhuGuan = [];
				studentList.forEach(el => {
					//选择题
					if (el.question_type == 1 || el.matter_type == 1) {
						if (el.answer == 1) {
							danXuan.push(el);
						} else {
							duoXuan.push(el);
						}
					} else if (el.question_type == 2 || el.matter_type == 2) {
						tianKong.push(el);
					} else if (el.type != 1 || el.type == 0) {
						zhuGuan.push(el);
					}
				});

				this.topicListsGround = {
					danXuan,
					duoXuan,
					tianKong,
					zhuGuan
				};
				console.log("this.topicListsGround",this.topicListsGround)
			}
		},
		toDetails(item){
			var selectId = item.matter_id || item.unid;
			console.log("去详情页：",item)
			var url = `/homework/topicDetails?homework_id=${this.homework_id}&student_id=${this.student_id}&selectId=${selectId}`;
			uni.navigateTo({
				url: url
			});
		},
		//提交评价
		async commentPut() {
			if (this.commentValue == '') {
				return uni.showModal({
					title: '提示',
					content: '评价不能为空',
					success: function(res) {}
				});
			}
			var query = {
				student_id: this.student_id,
				homework_id: this.homework_id,
				remark: this.commentValue
			};
			var url = '/api/v1/teacher/homework/analysis/remark';
			var res = await this.$wapi.apiPost(url, query);
			console.log(res);
			uni.showToast({
				title: res.data.message,
				duration: 2000
			});
		},
		preview(index) {
			console.log(index);
			this.yuLangShow = true;
			this.selectQuickIndex = index;
		},
		clearYuLang() {
			this.yuLangShow = false;
		},
		//根据后缀名判断文件类型
		fileTypes(suffix) {
			var suffix = suffix || '';
			var typeList = ['image', 'audio', 'video', 'file'];
			var length = typeList.length - 1;
			var suffixJson = {
				image: ['png', 'jpg', 'jpeg', 'gif', 'ico', 'bmp', 'pic', 'tif'],
				audio: ['mp3', 'ogg', 'wav', 'acc', 'vorbis', 'silk', 'mpeg'],
				video: ['mp4', 'webm', 'avi', 'rmvb', '3gp', 'flv']
			};
			var resultList = [];
			for (var attr in suffixJson) {
				resultList.push(!!~suffixJson[attr].indexOf(suffix));
			}
			var posIndex = resultList.indexOf(true);
			return posIndex != -1 ? typeList[posIndex] : typeList[length];
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background: #fafafa;
}
.content {
	width: 100%;
	min-height: 200rpx;
	background: url(http://homework-1302994015.cos.ap-guangzhou.myqcloud.com/homework/image/20210125164002600e83e266382.png) no-repeat;
	background-size: 100% 200rpx;

	padding: 35rpx;
	box-sizing: border-box;
	position: relative;

	.top-bolck {
		width: 100%;
		height: 40rpx;
		background: linear-gradient(180deg, #ffaa7f 0%, #ff7300 100%);
		border-radius: 10rpx;
	}

	.report-view {
		margin: 0 auto;
		padding: 0 20rpx;
		margin-top: -20rpx;
		border-radius: 5rpx;
		filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
	}
}

.report-view {
	.title-box {
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		background-color: #ffffff;
	}

	.mess-title {
		font-size: 32rpx;
		font-weight: bold;
		height: 100rpx;
		color: #333333;
		line-height: 100rpx;
		border-bottom: 1px dashed #ccc;
		display: flex;

		.lefticon {
			color: #ffaa7f;
			font-weight: normal;
			margin-right: 15rpx;
			font-size: 32rpx;
		}
	}

	.report-mess {
		width: 100%;
		height: 200rpx;
		background: radial-gradient(circle at right bottom, transparent 30rpx, #fafafa 0) top right / 51% 50% no-repeat,
			radial-gradient(circle at left bottom, transparent 30rpx, #fafafa 0) top left / 51% 50% no-repeat,
			radial-gradient(circle at right top, transparent 30rpx, #ffffff 0) bottom right / 51% 50% no-repeat,
			radial-gradient(circle at left top, transparent 30rpx, #ffffff 0) bottom left / 51% 50% no-repeat;

		.tab-box {
			font-size: 32rpx;
			color: #333333;
			height: 100rpx;
			line-height: 100rpx;
			border-bottom: 1px dashed #ccc;
			margin: 0 30rpx;
			display: flex;
			justify-content: space-around;

			.tab-item {
				position: relative;
				&::after {
					content: '';
					width: 100%;
					height: 5rpx;
					background-color: #ffaa7f;
					position: absolute;
					bottom: -1rpx;
					left: 0;
				}
			}
		}

		.sub-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
			height: 100rpx;
			line-height: 100rpx;
			margin: 0 30rpx;
			display: flex;

			.lefticon {
				color: #ffaa7f;
				font-weight: normal;
				margin-right: 15rpx;
				font-size: 32rpx;
			}
		}
	}

	.conter-body {
		width: 100%;
		padding: 0 30rpx 40rpx 30rpx;
		box-sizing: border-box;
		background-color: #ffffff;

		.messconter-box {
			color: #666666;
			font-size: 28rpx;
			padding: 20rpx;
			box-sizing: border-box;
			border-top: 1px dashed #ccc;

			.messbox-item {
				margin-bottom: 28rpx;
				word-break: break-all;
			}
		}
		
		.topic-box {
			font-size: 28rpx;
			min-height: 500rpx;
			padding: 30rpx 20rpx 20rpx 20rpx;
			box-sizing: border-box;
			border-top: 1px dashed #ccc;
			
			.topic-item {
				margin-bottom: 40rpx;
				word-break: break-all;
			
				.option-item {
					margin-left: 20upx;
					word-break: break-all;
				}
			}
		}
	}

	.model-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		height: 100rpx;
		line-height: 100rpx;
		background-color: #ffffff;
		display: flex;
		border-top: 1px dashed #ccc;
		border-bottom: 1px dashed #ccc;

		.lefticon {
			color: #ffaa7f;
			font-weight: normal;
			margin-right: 15rpx;
			font-size: 32rpx;
		}
	}
}

.accessory {
	display: flex;
	align-items: center;
	margin: 40upx 0;
	.accessoryText {
		font-size: 28upx;
		margin-left: 20upx;
		color: #20cfb8;
	}
}
.uploadIcon2 {
	width: 60upx;
	height: 60upx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(160deg, #8dead2 0%, #04b78a 100%);
	border-radius: 8upx;
	margin-left: 20upx;
}
.iconwenjianjiaxcx {
	color: #ffffff;
}
.iconyulanxcx {
	color: #ffffff;
}
.iconbofangxcx {
	color: #ffffff;
}
.iconyinpinxcx {
	color: #ffffff;
}
.iconxiangcexcx {
	color: #ffffff;
}
.report-form {
	display: flex;
	align-items: center;
	justify-content: space-around;
	margin: 25rpx 10rpx;
	font-size: 25rpx;
	color: #2C405A;
}

.state-box {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #666666;
	font-size: 25rpx;
	background: #f4f7fc;
	border-radius: 10rpx;

	.correct {
		text-align: center;
		padding: 20upx 20upx;
		// border: 1px solid #DCDFE6;
		flex: 1;
		border-top-left-radius: 10upx;
		border-bottom-left-radius: 10upx;
	}

	.error {
		text-align: center;
		padding: 20upx 20upx;
		// border-top: 1px solid #DCDFE6;
		// border-bottom: 1px solid #DCDFE6;
		flex: 1;
	}

	.done {
		text-align: center;
		padding: 20upx 20upx;
		// border: 1px solid #DCDFE6;
		flex: 1;
		border-top-right-radius: 10upx;
		border-bottom-right-radius: 10upx;
	}
}

.select-ground {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-around;
	margin: 40upx 0 30upx 0;
	background-color: #F4F7FC;
	border-radius: 6upx;
	min-height: 100upx;
}

.btn-item {
	font-size: 25rpx;
	color: #333;
	border: 1px solid #F4F7FC;
	border-radius: 6upx;
	padding: 10upx 30upx;
	margin-left: 20upx;
	text-align: center;
}

.is-select-btn {
	border: 1px solid #FFFFFF;
	background-color: #fff;
}

.tijiaobtn-item {
	font-size: 30upx;
	color: #369afe;
	border: 1px solid #369afe;
	border-radius: 6upx;
	padding: 10upx 20upx;
	margin-left: 20upx;
	text-align: center;
	color: #ffffff;
	background-color: #369afe;
}

.topic-list {
	width: 100%;
	min-height: 150upx;
	border-radius: 6upx;
	margin: 20upx 0;
	padding: 20upx 0;
	box-shadow: 0 4upx 8upx #e5e5e5;
	display: flex;
	flex-wrap: wrap;
	background-color: #F4F7FC;

	.topic-item {
		width: 16.6%;
		text-align: center;
		font-size: 25rpx;
		margin-bottom: 20upx;

		.item-index {
			color: #ffffff;
			width: 70upx;
			height: 70upx;
			line-height: 70upx;
			margin: 0 auto;
			background-color: #007aff;
			border-radius: 50%;
			margin-bottom: 10upx;
		}
	}
}

.comment-view {
	width: 100%;
	min-height: 150upx;
	border-radius: 6upx;
	margin: 20upx 0;
	padding: 40upx;
	box-sizing: border-box;
	box-shadow: 0 4upx 8upx #e5e5e5;
}

.comm-put {
	width: 100%;
	display: flex;
	flex-direction: row-reverse;
	margin: 40upx 0;
}

.tableBody {
	// border: 1px solid #dadada;
	border-right: 0;
	border-bottom: 0;
	width: 100%;
	font-size: 25rpx;
	margin-top: 40rpx;
	color: #707070;
}

.trRow {
	width: 100%;
	display: flex;
	justify-content: space-between;
}

.thItem,
.tdItem {
	padding: 10rpx;
	// border-bottom: 1px solid #dadada;
	// border-right: 1px solid #dadada;
	text-align: center;
	width: 100%;
}

.thItem {
	font-weight: bold;
	// background-color: #dadada;
}
</style>
